<template>
	<div class="registerPage">
		<div class="form" id="loginform">
			<h1>注册</h1>
			<form novalidate>
				<p class="userName">
					<label for="userName">用户名<span>*</span> </label>
					<input
						class="input"
						required
						type="text"
						id="userName"
						name="userName"
						v-model="registerModel.userName.value"
						@blur="requiredData"
					/>
					<span
						:class="{
							validation: true,
							req: true,
							errors: registerModel.userName.isErrShow
						}"
						v-show="registerModel.userName.isErrShow"
					>
						请输入用户名</span
					>
				</p>
				<p class="password">
					<label for="password">密码<span>*</span></label>
					<input
						class="input"
						required
						type="password"
						id="password"
						v-model="registerModel.password.value"
						name="password"
						@blur="requiredData"
					/>
					<span
						:class="{
							validation: true,
							req: true,
							errors: registerModel.password.isErrShow
						}"
						v-show="registerModel.password.isErrShow"
					>
						请输入密码</span
					>
				</p>
				<p class="userSex">
					<label for="">性别</label>
					<span class="userSex-radio">
						<label for="boy">男</label>
						<input
							type="radio"
							name="userSex"
							id="boy"
							value="男"
							v-model="registerModel.userSex.value"
							checked
						/>
						<label for="girl">女</label>
						<input
							type="radio"
							name="userSex"
							v-model="registerModel.userSex.value"
							value="女"
							id="girl"
						/>
					</span>
				</p>
				<p class="userMail">
					<label for="userMail">电子邮箱<span>*</span> </label>
					<input
						class="input"
						required
						type="text"
						id="userMail"
						name="userMail"
						v-model="registerModel.userMail.value"
						@blur="requiredData"
					/>
					<span
						:class="{
							validation: true,
							req: true,
							errors: registerModel.userMail.isErrShow
						}"
						v-show="registerModel.userMail.isErrShow"
					>
						请输入电子邮箱</span
					>
				</p>
				<p class="userPhone">
					<label for="userPhone">手机号<span>*</span> </label>
					<input
						class="input"
						required
						type="text"
						id="userPhone"
						name="userPhone"
						v-model="registerModel.userPhone.value"
						@blur="requiredData"
					/>
					<span
						:class="{
							validation: true,
							req: true,
							errors: registerModel.userPhone.isErrShow
						}"
						v-show="registerModel.userPhone.isErrShow"
					>
						请输入手机号</span
					>
				</p>
				<p class="register">
					<input type="button" value="注册" @click="setRegister" />
				</p>
			</form>
		</div>
	</div>
</template>

<script setup>
import { register } from '../../api/users'
const registerModel = ref({
		userName: {
			value: '',
			isErrShow: false
		},
		password: {
			value: '',
			isErrShow: false
		},
		userSex: {
			value: '男',
			isErrShow: false
		},
		userMail: {
			value: '',
			isErrShow: false
		},
		userPhone: {
			value: '',
			isErrShow: false
		}
	}),
	router = useRouter()
// 验证函数
function requiredData(e) {
	registerModel.value[e.target.id].isErrShow =
		registerModel.value[e.target.id].value === '' ? true : false
}

// 注册
function setRegister() {
	console.log(registerModel.value.userName.value)
	register({
		userName: registerModel.value.userName.value,
		password: registerModel.value.password.value,
		sex: registerModel.value.userSex.value,
		userMail: registerModel.value.userMail.value,
		userPhone: registerModel.value.userPhone.value
	})
		.then(() => {
			AMessage.success('3秒后跳转到登录页')
			setTimeout(() => {
				router.push('/login')
			}, 3000)
		})
		.catch(err => {
			console.log(err)
			AMessage.error(err)
		})
}
</script>

<style lang="scss" scoped>
$primary: #fad0c4;
$complementary: #5a3b5d;
$lightsep: rgb(220, 220, 220);

// 将整个页面扩展到整个屏幕 不局限于双容器
.registerPage {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 0;
	background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);

	.form {
		margin-top: 3rem;
	}
}

/* 创建抖动动画 */
@keyframes shakeMe {
	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-10px);
	}

	40%,
	80% {
		transform: translateX(10px);
	}
}

/* 应用动画 */
.errors {
	animation-name: shakeMe;
	animation-duration: 0.5s;
}

body {
	background: #fedc2a;
	font-family: 'Raleway', sans-serif;
	background-size: cover;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form {
	background: #fff;
	border: 1px solid #d9d9d9;
	color: rgb(99, 99, 99);
	width: 300px;
	border-radius: 4px;
	margin: 0 auto;
	padding: 20px 30px;

	h1 {
		text-transform: uppercase;
		font-weight: normal;
		font-size: 1.5em;
		text-align: center;
		margin: 0;
		padding: 10px 0px;
		border-bottom: 1px solid $lightsep;
	}
}

form p {
	position: relative;
	margin: 25px 0 10px 0;
}

p > label,
.input {
	display: block;
	width: 100%;
	padding-bottom: 10px;
	box-sizing: border-box;
}

/* 按钮样式*/

[type='button'] {
	display: block;
	color: $complementary;
	font-weight: bold;
	border-radius: 2px;
	background: $primary;
	box-shadow: 5px 5px 0 0 $primary, inset 4px 4px 0 0 white;
	border: 2px solid $complementary;
	border-radius: 3px;
	padding: 10px;
	width: 100%;
	margin: 0 auto;
	transition: background 0.3s;

	// 选中触发 显示阴影
	&:hover {
		background: white;
		box-shadow: 5px 5px 0 0 $primary, inset 4px 4px 0 0 white;
	}

	// 聚焦或被选中时触发
	&:active,
	&:focus {
		position: relative;
		top: 1px;
		outline: none;
		background: darken($primary, 10%);
	}
}
// 单选按钮样式
.userSex-radio {
	display: flex;
	& > label {
		margin-right: 0.5rem;
	}
	& > label:not(:nth-child(1)) {
		margin-left: 1rem;
	}
}
/* input样式 */
.input {
	font-size: 0.85em;
	background: rgb(255, 255, 255);
	border: 1px solid $lightsep;
	height: 40px;
	transition: border-color 0.4s, box-shadow 1s;
	padding: 20px;
	&:focus {
		outline: none;
	}
}

// 被选中或聚焦时 添加上边框与阴影效果
.input:active,
.input:focus {
	border: 1px solid $complementary;
	box-shadow: 4px 4px 0 #c7a9cd;
}
// 错误信息的css
.validation {
	display: block;
	font-size: 0.8em;
	padding-top: 0.5em;
	position: absolute;
	right: 0;
	opacity: 1;
	transition: opacity 1s;
}

.validation.req {
	color: #b54300;
}

.validation.error {
	color: rgb(183, 0, 76);
}
</style>
